﻿<template>
  <div class="flex flex-col h-full">
    <base-container class="flex-1">
      <base-card class="h-full flex flex-col">
        <template #header>
          <div class="flex items-center gap-3">
            <span class="text-lg font-medium text-ct1">选择要配置的支付</span>
          </div>
        </template>
        <!-- 卡片内容区域 -->
        <div class="card-container">
          <!-- 微信支付卡片 -->
          <div class="card">
            <img class="card-logo" src="@/assets/setting/pay-wxchat.png" />
            <div class="card-info">
              <span class="title">微信支付</span>
              <span class="sub-title">租户在租赁时可以选择微信支付</span>
            </div>
            <el-button type="primary" class="config-btn">配置</el-button>
          </div>

          <!-- 支付宝支付卡片 -->
          <div class="card">
            <img class="card-logo" src="@/assets/setting/pay-alipay.png" />
            <div class="card-info">
              <span class="title">支付宝支付</span>
              <span class="sub-title">租户在租赁时可以选择支付宝支付</span>
            </div>
            <el-button type="primary" class="config-btn">配置</el-button>
          </div>
        </div>
      </base-card>
    </base-container>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    // margin-top: 24px;
  }

  .card {
    display: flex;
    position: relative;
    background: white;
    height: 108px;
    border-radius: 8px;
    border: 1px solid var(--cb1);
    overflow: hidden;
    padding: 24px;
    gap: 16px;
    align-items: center;

    .card-logo {
      width: 60px;
      height: 60px;
    }

    .card-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      flex: 1;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ct1);
    }

    .sub-title {
      font-size: 14px;
      color: var(--ct3);
    }
  }
</style>
